<template>
    <div>
        <h3>说明:自定义指令</h3>
    </div>
    <el-button @click="handleClick">+</el-button>

    <div>{{ obj }}</div>

    <h3>v-once只渲染一次</h3>
    <span v-once>{{ obj }}</span>

    <h3>v-pre当成普通文本渲染</h3>
    <span v-pre>{{ this will not be compiled }}</span>

    <h3>v-memo缓存模板子树，一般配合v-for在数据量超过1000使用，虚拟 DOM 的 vnode 创建也将被跳过，比:key进行diff算法比较更高效</h3>
    <h3>v-for与v-memo必须同级</h3>
    <span v-for="item in arr" :key="item.key" v-memo="[item.key===selected]">
        {{ item.value }}
    </span>

    <h3>v-cloak，编译挂载完成前的规则，只在没有构建过程的项目使用</h3>
</template>

<script setup>
import { ref } from "vue"

const obj = ref({
    greet: 1
})

const arr = ref([
    { key: 1, value: 1 },
    { key: 2, value: 2 },
    { key: 3, value: 3 },
])

const selected = ref(0)
const handleClick = () => {
    obj.value.greet += 1

    selected.value = obj.value.greet
}
</script>

<style lang="scss" scoped>
</style>